<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${notice.title}">通知/公告详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Layui样式 -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        .main-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        }

        .layui-table {
            margin-top: 20px;
        }

        .back-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

    </style>
</head>
<body>
<!-- 返回按钮 -->
<!-- 下拉菜单容器 -->
<div class="back-btn">
    <button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'mousedown'}">
        操作<i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
    </button>
</div>

<div class="main-container">
    <h1 class="layui-h1" th:text="${notice.title}" style="text-align: center;"></h1>

    <table class="layui-table" lay-even>
        <colgroup>
            <col width="20%">
            <col width="80%">
        </colgroup>
        <tbody>
        <tr>
            <th>标题</th>
            <td th:text="${notice.title}"></td>
        </tr>
        <tr>
            <th>内容</th>
            <td><div th:utext="${notice.content}" style="white-space: pre-wrap;"></div></td>
        </tr>
        <tr>
            <th>类型</th>
            <td th:text="${notice.type} == 1 ? '通知' : '公告'"></td>
        </tr>
        <tr>
            <th>创建时间</th>
            <td th:text="${#dates.format(notice.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        </tr>
        <tr>
            <th>创建者</th>
            <td th:text="${notice.createdUser}"></td>
        </tr>
        <tr>
            <th>发布时间</th>
            <td th:text="${#dates.format(notice.modifiedTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        </tr>
        <tr>
            <th>发布者</th>
            <td th:text="${notice.modifiedUser}"></td>
        </tr>
        <tr>
            <!--状态 0 正常 1 关闭 2 待发布-->
            <th>状态</th>
            <td th:switch="${notice.status}">
                <span th:case="0">正常</span>
                <span th:case="1">关闭</span>
                <span th:case="2">待发布</span>
                <span th:case="*">未知</span>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script th:src="@{/layui/layui.js}"></script>

<script>
    layui.use('dropdown', function() {
        var dropdown = layui.dropdown

        // 自定义事件
        dropdown.render({
            elem: '.demo-dropdown-on',
            // trigger: 'click' // trigger 已配置在元素 `lay-options` 属性上
            data: [{
                title: '返回首页',
                id: 100,
                href: '/toChina'
            },{
                title: '返回历史通知/公告列表',
                id: 101,
                href: '/toPastNotice'
            }]
        });
    });
</script>
</body>
</html>